<template>
	<view class="orderInfoBox">
		<n-loading></n-loading>
		<view class="titleBg"></view>
		<view v-if="orderInfo">
			<!-- 地址 -->
			<view class="takeGoodsTips">
				<!-- 商品详情 -->
				<view class="infoContBox mt24">
					<view class="shopInfo">
						<dh-image class="shopLogo" :src="orderInfo.store.logo==null?'../../static/img/vector.svg':orderInfo.store.logo"
						 errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
						  {{orderInfo.store.name}}
					</view>
					
					<view class="goodsCont">
						<dh-image class="niccImg" :src="orderInfo.goods.image"
						 errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
						<view class="goodsInfo">
							<view class="tit">
								<view class="titleft ellipsis2">{{orderInfo.goods.name}}</view>
							</view>
							<view class="priceBox">
								<view class="price">￥{{orderInfo.order.pay_amount}}</view>
								<text>×1</text>
							</view>
						</view>
					</view>
					
				</view>
				<!-- 核销码 -->
				<view class="carrdInfoBottom">
					<view class="b-l-t"></view>
					<view class="b-r-t"></view>
					<!-- 内容 -->
					<view class="pickupCode">
						<view>
							<img :src="orderInfo.pickup_code_img" />
							<view class="pickupNum" v-if="orderInfo.is_verification==0">活动码：{{orderInfo.pickup_code}}</view>
							<!-- 已提货 -->
							<view class="pickedUpMask" v-if="orderInfo.is_verification==1"></view>
							<image class="pickedUp" src="../../static/img/yth.svg" mode="" v-if="orderInfo.is_verification==1"></image>
							<!-- 已退款 -->
							<view class="pickedUpMask" v-if="orderInfo.is_verification==2"></view>
							<image class="pickedUp" src="../../static/img/ytk.svg" mode="" v-if="orderInfo.is_verification==2"></image>
						</view>
					</view>
				</view>
				<!-- 取货商家 -->
				
				<!-- 已取货 -->
				<view class="useRule" v-if="storeInfoList">
					<view class="useRuleTit">商家地址</view>
					<view class="seeDesirable">
						<view class="left">
							<view class="tit">{{storeInfoList.name}}</view>
							<view class="tips">{{storeInfoList.address}}</view>
						</view>
						<u-icon name="phone" color="#999" size="33" @click="phoneCall()"></u-icon>
					</view>
					<view class="mapBox">
						<map style="width:100%;height:100%" :latitude="storeInfoList.lat" :longitude="storeInfoList.lon" :markers="curmarkers">
						</map>
					</view>
					<view class="distance" @tap="tomap">
						据您{{storeInfoList.distance}}km<u-icon style="float: right;margin-top: 24rpx;" name="arrow-right" color="#999" size="20"></u-icon>
					</view>
				</view>
				<!-- 活动信息 -->
				<view class="activityInfo">
					<view class="infoTit">
						<u-icon name="calendar" color="#333" size="26"></u-icon>
						有效期
					</view>
					<view class="infoCont">
						<view class="each"><text>·</text>{{getdate(orderInfo.created_at,0)+'-'+getdate(orderInfo.goods.virtual_validity,0)}}</view>
					</view>
					<view class="infoTit">
						<u-icon name="clock" color="#333" size="26"></u-icon>
						使用时间
					</view>
					<view class="infoCont">
						<view class="each"><text>·</text>{{orderInfo.store.open_time.start_at+'-'+orderInfo.store.open_time.end_at}}</view>
					</view>
					<view class="infoTit">
						<u-icon name="list-dot" color="#333" size="26"></u-icon>
						使用规则
					</view>
					<view class="infoCont">
						<u-parse :html="orderInfo.goods.content" class="each"></u-parse>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo:null,
				order_id:null,
				// 如果是需要核销的商品这儿要获取商家信息
				storeId:null,
				lat:0,//
				lon:0,//
				storeInfoList:null,
			}
		},
		onLoad: function (option) {
			this.order_id = option.id;
		},
		onShow() {
			this.getOrderInfo(this.order_id);
		},
		methods: {
			getOrderInfo(id){
				this.apiget('/fun/order-virtual/view',{id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.orderInfo = res.data.data;
						this.storeId = res.data.data.owner_id;
						this.isGetLocation();
					}
				})
			},
			// 获取定位
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'gcj02',
					success (res) {
						_this.lat = res.latitude;
						_this.lon = res.longitude;
						_this.getStoreInfo();
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},
			getStoreInfo() {
				this.apiget('/shop/store-front/view',{id:this.storeId,lat:this.lat,lon:this.lon}).then(res =>{
					if(res.data.status == 200 ) {
						this.storeInfoList = res.data.data;
					}
				})
			},
			tomap() {
				uni.openLocation({
					latitude: parseFloat(this.storeInfoList.lat),
					longitude: parseFloat(this.storeInfoList.lon),
					name:this.storeInfoList.name,
					address:this.storeInfoList.address,
					success: function () {
						console.log('success');
					}
				});
			},
			phoneCall() {
				uni.makePhoneCall({
				    phoneNumber: this.storeInfoList.phone 
				});
			},
		}
	}
</script>

<style lang="scss">
	.orderInfoBox{
		min-height: 100%;
		padding-bottom: 78rpx;
		background-color: #F8F8FA;
	}
	.titleBg{
		width: 100%;
		height: 214rpx;
		position: absolute;
		top: 0;
		left:0;
		background: linear-gradient(180deg, #FF5238 0%, rgba(255, 82, 56, 0) 100%);
	}
	.mt24{
		margin-top: 24rpx;
	}
	.takeGoodsTips{
		position: relative;
		padding: 0 32rpx;
		
		.tipsContBox{
			// min-height: 100rpx;
			padding: 24rpx 32rpx;
			display: flex;
			background-color: #fff;
			box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.02);
			border-radius: 16rpx;
			
			.tipsCont{
				flex: auto;
				margin-left: 32rpx;
				
				.tipsContTit{
					font-size: 32rpx;
					line-height: 48rpx;
					color: #333;
					
					text{
						margin-right: 20rpx;
					}
				}
				.tipsContInfo{
					font-size: 24rpx;
					line-height: 40rpx;
					color: #666;
				}
			}
		}
	}
	
	// 核销码
	.carrdInfoBottom{
		position: relative;
		padding: 48rpx 24rpx 48rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.b-l-t{
			position: absolute;
			top: -14rpx;
			left: -14rpx;
			width: 28rpx;
			height: 28rpx;
			background-color: #F8F8FA;
			border-radius: 50%;
		}
		.b-r-t{
			position: absolute;
			top: -14rpx;
			right: -14rpx;
			width: 28rpx;
			height: 28rpx;
			background-color: #F8F8FA;
			border-radius: 50%;
		}
		
		// 内容
		.pickupCode{
			position: relative;
			text-align: center;
			width: 296rpx;
			// height: 296rpx;
			margin: 0 auto;
			
			img{
				display: inline-block;
				width: 296rpx;
				height: 296rpx;
			}
			
			image{
				display: inline-block;
				width: 296rpx;
				height: 296rpx;
			}
			
			.pickupNum{
				margin-top: 15rpx;
				font-size: 28rpx;
				color: #666;
				line-height: 44rpx;
			}
			
			.pickedUpMask{
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -148rpx;
				width: 296rpx;
				height: 296rpx;
				background-color: rgba(255,255,255,.95);
				
			}
			.pickedUp{
				position: absolute;
				top: -18rpx;
				right: -38rpx;
				width: 138rpx;
				height: 138rpx;
			}
		}
		
	}
	
	// 商家信息
	.useRule{
		padding: 24rpx 32rpx;
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.useRuleTit{
			// margin-bottom: 30rpx;
			font-size: 32rpx;
			line-height: 48rpx;
			color: #333;
		}
		
		.seeDesirable{
			padding: 22rpx 0;
			display: flex;
			align-items: center;
			
			.left{
				flex: auto;
				
				.tit{
					font-size: 28rpx;
					line-height: 44rpx;
					color: #333;
					
					text{
						display: inline-block;
						padding: 0 16rpx;
						margin-left: 8rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #FF5238;
						background: rgba(255, 82, 56, 0.12);
						border-radius: 40rpx;
					}
				}
				
				.tips{
					font-size: 24rpx;
					line-height: 40rpx;
					color: #999;
				}
			}
		
		}
		.mapBox{
			height: 236rpx;
			background-color: #F8F8FA;
		}
			
		.distance{
			height: 68rpx;
			padding: 0 24rpx;
			font-size: 24rpx;
			line-height: 68rpx;
			background-color: #F8F8FA;
			color: #333;
		}
	}

	.infoContBox{
		padding: 24rpx 24rpx 16rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		
		
		.shopInfo{
			display: flex;
			padding-bottom: 24rpx;
			font-size: 28rpx;
			line-height: 44rpx;
			
			.shopLogo{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		
		.goodsCont{
			padding: 24rpx;
			margin-bottom: 8rpx;
			display: flex;
			background: rgba(64, 169, 255, 0.1);
			border-radius: 16rpx;
			
			.niccImg {
				width:160rpx;
				height: 160rpx;
				margin-right: 24rpx;
				border-radius: 8rpx;
				overflow: hidden;
			}
			
			.goodsInfo{
				flex: auto;
				
				.tit{
					display: flex;
					margin-bottom: 26rpx;
					font-size: 24rpx;
					color: #666;
					line-height: 40rpx;
					
					.titleft{
						flex: auto;
						width: 1px;
					}
				}
				.priceBox{
					display: flex;
					margin-top: 8rpx;
					font-size: 32rpx;
					line-height: 40rpx;
					color: #FF5238;
					
					.price{
						flex: auto;
					}
					
					text{
						font: 24rpx;
						color: #333;
					}
				}
			}
		}
	}
	// 活动信息
	.activityInfo{
		padding: 24rpx 32rpx 30rpx;
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		
		.infoTit{
			font-size: 28rpx;
			line-height: 44rpx;
			color: #333333;
			
			u-icon{
				margin-right: 11rpx;
			}
		}
		.infoCont{
			font-size: 28rpx;
			line-height: 44rpx;
			
			.each{
				padding: 6rpx 16rpx;
			}
		}
	}
</style>
